<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>[[#{login}]]</title>
    <!-- Bootstrap core CSS -->
    <link href="/index/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/index/css/signin.css" rel="stylesheet">
    <script src="/index/js/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        var _topWin = window;
        while (_topWin != _topWin.parent.window) {
            _topWin = _topWin.parent.window;
        }
        if (window != _topWin)_topWin.document.location.href = "/login";
        $(function () {
            $("#sub-btn").click(function () {
                $.post("/loginCheck",$(".form-signin").serialize(),function (msg) {
                    if(msg.login_msg != "passed"){
                        if(msg.login_msg == "wrong_name") $("#error_login").html("<div class=\"alert alert-danger\" role=\"alert\"><strong>[[#{wrongLogin}]]</strong>&nbsp;&nbsp;[[#{wrongName}]]</div>");
                        else if(msg.login_msg == "wrong_password") $("#error_login").html("<div class=\"alert alert-danger\" role=\"alert\"><strong>[[#{wrongLogin}]]</strong>&nbsp;&nbsp;[[#{wrongPassword}]]</div>");
                        return false;
                    }
                    window.location.href="/manager";
                },"json");
            });
        });
    </script>
</head>

<body class="text-center">
<form class="form-signin">
    <img class="mb-4" src="/index/images/logo.png" alt="" width="100" height="100">
    <h1 class="h3 mb-3 font-weight-normal">[[#{signTitle}]]</h1>
    <label for="username" class="text-info" style="float:left">[[#{username}]]</label>
    <input type="text" class="form-control" th:placeholder="#{username}" required="" autofocus="" name="username" id="username">
    <br>
    <label for="password" class="text-info" style="float:left">[[#{password}]]</label>
    <input type="password" class="form-control" th:placeholder="#{password}" required="" name="password" id="password">
    <div class="pull-right">
        <label>
            <a class="text-muted" th:text="#{forgetPassword}" href="/forget" style="font-size: larger;color: forestgreen"></a>
        </label>
    </div>
    <div class="pull-left">
        <label>
            <a class="text-muted" th:text="#{goRegister}" href="/register" style="font-size: larger;color: #8a2be2"></a>
        </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="button" id="sub-btn">[[#{signButton}]]</button>
    <p id="login_error"  style="color: red"></p>
    <a class="btn btn-sm" th:href="@{/login(lang='zh_CN')}" style="font-size: larger">中文</a>
    <a class="btn btn-sm" th:href="@{/login(lang='en_US')}" style="font-size: larger">English</a>
    <div id="error_login"></div>
</form>
</body>

</html>